<template>
  <el-card header="基础用法和事件">
    <YsTable
      :data="data"
      :option="option"
      :page="page"
      :column="column"
      @row-add="rowAdd"
      @row-del="rowDel"
      @row-edit="rowEdit"
      @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="selectionChange"
      @select="select"
      @select-all="selectAll"
    >
    </YsTable>
  </el-card>
</template>

<script setup lang="ts">
import {ref,computed,toRaw} from "vue";

import type {YsTableColumn,YsPageType, YsTableOption} from 'ys-crud/packages/Table/index'
import {ElMessage} from "element-plus";


const data = ref([{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
}])

const tableRowClassName = ({rowIndex}: {rowIndex: number}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
const option = computed<YsTableOption>(() => {
  return {
    border: true,
    size: 'default',
    menu: true,
    page: true,
    selection: true,
    rowClassName: tableRowClassName
  }
})


const page = ref<YsPageType>({
  total: 100
})

const column = ref<Array<YsTableColumn>>([
  {label: '数据库名称', prop: 'a'},
  {label: '数据表名称', prop: 'tableName'},
  {label: '表中文名称', prop: 'tableChName'},
  {label: '产品线', prop: 'productName'},
  {label: '主题域', prop: 'domainName'},
  {label: '创建时间', prop: 'createTime'},
  {label: '创建人', prop: 'createBy'}
])

const selectionChange = (selection) => {
  console.log(toRaw(selection),'123123')
}
const select = (selection, row) => {
  console.log(selection, row ,'selectselect')
}

const selectAll = (selection) => {
  console.log(selection,'sall')
}


const rowAdd = () => {
  ElMessage.success('新增')
}

const rowEdit = () => {
  ElMessage.success('编辑')

}

const rowDel = () => {
  ElMessage.success('删除')
}

const currentChange = (val) => {
  ElMessage.success(`currentChange => currentPage:${val}`)
}

const sizeChange = (val) => {
  ElMessage.success(`sizeChange => pageSize:${val}`)
}



</script>

<style lang="scss" scoped>

</style>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>